<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  created() {
    // 初始化
    this.setRem()
    const _this = this
    // 改变窗口大小时重新设置 rem
    window.onresize = () => {
      // 调用methods中的事件
      _this.setRem()
    }
  },
  // destroyed() {
  //   window.onresize = null
  // },
  methods: {
    setRem() {
      var bodyWidth = document.body.clientWidth
      var whdef = 0
      if (bodyWidth > 1081) {
        whdef = 100 / bodyWidth
      } else {
        whdef = 80 / bodyWidth
      }
      var rem = bodyWidth * whdef
      document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'
      // const baseSize = 100
      // const basePc = baseSize / 1920 // 表示1920的设计图,使用100PX的默认值
      // let vW = window.innerWidth // 当前窗口的宽度
      // const vH = window.innerHeight // 当前窗口的高度
      // // 非正常屏幕下的尺寸换算
      // const dueH = vW * 1080 / 1920
      // if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
      //   vW = vH * 1920 / 1080
      // }
      // const rem = vW * basePc // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
      // document.documentElement.style.fontSize = rem + 'px'
    }
  }
}
</script>
<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
  padding: 0px;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
